<template>
    <div class="airblower">
        <div class="airblowerItem">
            <div class="airbName">
                <div class="status"><span></span>通讯中</div>

                <div class="options">
                    <el-button type="primary">启动</el-button>
                    <el-button type="warning">复位</el-button>
                </div>
            </div>
            <div class="content">
                <div class="dosingList">
                    <el-card class="dosingListItem" shadow="always">
                        <div class="title">加药浓度</div>
                        <div class="number">0.00%</div>
                    </el-card>
                    <el-card class="dosingListItem" shadow="always">
                        <div class="title">TP目标设定</div>
                        <div class="number">0.00mg/L</div>
                    </el-card>
                    <el-card class="dosingListItem" shadow="always">
                        <div class="title">进水TP浓度</div>
                        <div class="number">0.00mg/L</div>
                    </el-card>
                    <el-card class="dosingListItem" shadow="always">
                        <div class="title">出水TP浓度</div>
                        <div class="number">0.00mg/L</div>
                    </el-card>
                    <el-card class="dosingListItem" shadow="always">
                        <div class="title">PAC投加流量</div>
                        <div class="number">0.00L/h</div>
                    </el-card>
                </div>
                <div class="dosingList">
                    <el-card class="dosingListItem" shadow="always">
                        <div class="title">加药泵1</div>
                        <div class="number">运行</div>
                    </el-card>
                    <el-card class="dosingListItem" shadow="always">
                        <div class="title">加药泵2</div>
                        <div class="number breakdown">故障</div>
                    </el-card>
                    <el-card class="dosingListItem" shadow="always">
                        <div class="title">加药泵3</div>
                        <div class="number stop">停机</div>
                    </el-card>
                </div>
                <div class="chart">
                    <div class="uploadBtn" v-if="localTypeUnit == 1">
                        <el-select
                            v-model="typeUnit2"
                            class="m-2"
                            placeholder="请选择上传单位"
                            style="width: 160px"
                        >
                            <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </div>
                    <div ref="chart1" style="width: 100%; height: 300px"></div>
                    <div ref="chart2" style="width: 100%; height: 300px"></div>
                    <div ref="chart3" style="width: 100%; height: 300px"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
const model = ref(true);
let myChart = ref(null);
let myChart2 = ref(null);
let myChart3 = ref(null);
const chart1 = ref();
const chart2 = ref();
const chart3 = ref();
import * as echarts from "echarts";
onMounted(() => {
    myChart = echarts.init(chart1.value);
    myChart2 = echarts.init(chart2.value);
    myChart3 = echarts.init(chart3.value);
    let option, option2, option3;

    option = {
        title: {
            text: "PAC加药泵流量",
        },
        xAxis: {
            type: "category",
            data: [
                "0点",
                "1点",
                "2点",
                "3点",
                "4点",
                "5点",
                "6点",
                "7点",
                "8点",
                "9点",
                "10点",
                "11点",
                "12点",
                "13点",
                "14点",
                "15点",
                "16点",
                "17点",
                "18点",
                "19点",
                "20点",
                "21点",
                "22点",
                "23点",
            ],
        },

        legend: {
            data: ["流量统计"],
        },
        grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
        },
        yAxis: {
            type: "value",
        },
        series: [
            {
                data: [
                    150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135,
                    147, 260, 150, 230, 224, 218, 135, 147, 260, 135, 147, 260,
                ],
                type: "line",
            },
        ],
    };
    option2 = {
        title: {
            text: "PAC投加量",
        },
        xAxis: {
            type: "category",
            data: [
                "0点",
                "1点",
                "2点",
                "3点",
                "4点",
                "5点",
                "6点",
                "7点",
                "8点",
                "9点",
                "10点",
                "11点",
                "12点",
                "13点",
                "14点",
                "15点",
                "16点",
                "17点",
                "18点",
                "19点",
                "20点",
                "21点",
                "22点",
                "23点",
            ],
        },

        legend: {
            data: ["流量统计"],
        },
        grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
        },
        yAxis: {
            type: "value",
        },
        series: [
            {
                data: [
                    150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135,
                    147, 260, 150, 230, 224, 218, 135, 147, 260, 135, 147, 260,
                ],
                type: "line",
            },
        ],
    };
    option3 = {
        title: {
            text: "TP浓度",
        },
        xAxis: {
            type: "category",
            data: [
                "0点",
                "1点",
                "2点",
                "3点",
                "4点",
                "5点",
                "6点",
                "7点",
                "8点",
                "9点",
                "10点",
                "11点",
                "12点",
                "13点",
                "14点",
                "15点",
                "16点",
                "17点",
                "18点",
                "19点",
                "20点",
                "21点",
                "22点",
                "23点",
            ],
        },

        legend: {
            data: ["流量统计"],
        },
        grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
        },
        yAxis: {
            type: "value",
        },
        series: [
            {
                data: [
                    150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135,
                    147, 260, 150, 230, 224, 218, 135, 147, 260, 135, 147, 260,
                ],
                type: "line",
            },
        ],
    };

    option && myChart.setOption(option);
    option && myChart2.setOption(option2);
    option && myChart3.setOption(option3);
});
</script>

<style scoped lang="less">
.airblower {
    display: flex;
    flex-direction: row;
    .airblowerItem {
        flex: 1;
        .airbName {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            padding: 12px;
            .name {
                line-height: 20px;
                font-size: 16px;
            }
            .status {
                line-height: 24px;
                font-size: 16px;
                display: flex;
                flex-direction: row;
                align-items: center;
                color: #13ce66;
                span {
                    display: inline-block;
                    margin-right: 10px;
                    width: 20px;
                    height: 20px;
                    border-radius: 10px;
                    background: #13ce66;
                }
            }
        }
        .content {
            padding: 16px;
            .dosingList {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                margin-bottom: 20px;
                .dosingListItem {
                    width: 150px;
                    margin: 0 10px 10px 0;
                    .title {
                        font-size: 14px;
                        margin-bottom: 15px;
                    }
                    .number {
                        font-size: 14px;
                        color: #409ffe;
                        font-weight: bold;
                        &.breakdown {
                            color: red;
                        }
                        &.stop {
                            color: #ccc;
                        }
                    }
                }
            }
        }
    }
}
</style>